<?php
// main.php - Bootstrap Hero 示例
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Hero Example</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Hero 区域 -->
    <div class="px-4 pt-5 my-5 text-center border-bottom">
        <h1 class="display-4 fw-bold text-body-emphasis">Welcome to Our Website</h1>
        <div class="col-lg-6 mx-auto">
            <p class="lead mb-4">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
                <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary Button</button>
                <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary Button</button>
            </div>
        </div>
        <div class="overflow-hidden" style="max-height: 30vh;">
            <div class="container px-5">
                <img src="https://picsum.photos/1000/500" alt="Hero image showing a landscape" class="img-fluid border rounded-3 shadow-lg mb-4" width="700" height="500" loading="lazy">
            </div>
        </div>
        <!-- 包含名称信息 -->
        <p class="text-muted">Created by: 豆包编程助手</p>
    </div>

    <!-- 引入 Bootstrap JS 和 Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
